<template>
    <div class="index-content">
        <van-row>
            <van-col span="24" class="padding-left-right-3">
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="(image, index) in images" :key="index">
                        <img class="border-radius-img" :src="$imgPath(image.image)" @click="bannerLink(image)" />
                    </van-swipe-item>
                </van-swipe>
            </van-col>
        </van-row>
        <div class="nav-tab">
            <van-row>
                <van-col span="4" class="text-align-c" v-for="(item,index) in gameLists" :key="index" :offset="index>0 ? '1' : ''">
                    <div @click="gameList(item)">
                        <img :src="$imgPath(item.image)" alt="">
                        <span class="nav-tab-title">{{item.name}}</span>
                    </div>
                </van-col>
                <van-col span="4" offset="1" class="text-align-c">
                    <div @click="allGame()">
                        <img src="../../assets/image/index/icon_qb.png" alt="">
                        <span class="nav-tab-title">全部</span>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="nav-tab">
            <van-row>
                <van-col span="24" class="text-align-c">
                    <div class="position-r ph-box">
                        <img class="icon_img_bj" src="../../assets/image/index/img_bj.png" alt="">
                        <router-link tag="div" :to="{name:'foundList'}" class="box-ph">
                            <img class="jiangbei fl" src="../../assets/image/index/icon_list.png" alt="">
                            <em class="fl font-3 color-default ph-zi">TOP排行榜</em>
                            <!-- <van-icon class="fr ph-jt" name="arrow" color="#D84F4D" size=".8rem" /> -->
                            <span class="fr ph-jt">
                                <img src="../../assets/image/index/icon_arrow.png" alt="">
                            </span>
                            <span class="fr phimg-box">
                                <img v-for="(item,index) in phImgs" :key="index" :src="$imgPath(item.user.headImg)" alt="">
                            </span>                                                        
                        </router-link>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="index-content-list">
            <span class="tuijian fl">
                为你推荐
                <em class="list-sx fr"><img src="../../assets/image/index/icon_change.png" alt="" @click="recommendedDisplayMore"></em>
            </span>
            <div class="clearfix index-content-list2">
                <ul class="list-box clearfix" id="activityUl" :style="{width:listWidth + 'rem'}"> 
                    <li class="list fl activityLi" v-for="(item,index) in recommendedDisplayList" :key="index" ref="liBox" @click="detailLink(1,item,'')">
                        <span class="img-box position-r">
                            <img :src="$imgPath(item.headImg)" alt="">
                            <!-- <em class="zaixian">{{item.onlineStatus == 0 ? '在线' : '下线'}}</em> -->
                        </span>
                        <span class="list-name list-title">{{item.userName}}</span>
                        <span class="list-name2">
                            <em class="list-duanwei">{{item.secondName}}</em>
                            <em class="list-money fr">
                                <label class="fr">{{item.age}}</label>
                                <i class="sex fr">
                                    <img v-if="item.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                                    <img v-if="item.sex == 1" src="../../assets/image/index/img_male.png" alt="">
                                    <img v-if="item.sex == 0" src="../../assets/image/icon_unknown.png" alt="">
                                </i>
                            </em>
                        </span>
                        <!-- <i class="fl money">￥</i> -->
                        <!-- <span class="list-name" v-if="iosTrue == false">
                            <em class="list-money fl">
                                
                                <i class="font-34">{{item.price}}钻</i>
                                /{{item.priceUnit}}
                            </em>
                            <em class="list-money fl">
                                <label class="fr">{{item.age}}</label>
                                <i class="sex fr">
                                    <img v-if="item.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                                    <img v-if="item.sex == 1" src="../../assets/image/index/img_male.png" alt="">
                                    <img v-if="item.sex == 0" src="../../assets/image/icon_unknown.png" alt="">
                                </i>
                            </em>
                        </span> -->
                    </li>
                </ul>
            </div>
        </div>
        <div class="index-content-list">
            <span class="tuijian fl">
                优选新人
                <em class="list-sx fr"><img src="../../assets/image/index/icon_change.png" alt="" @click="newPersonDisplayMore"></em>
            </span>
            <div class="clearfix index-content-list2">
                <ul class="list-box clearfix" id="activityUl" :style="{width:listWidth1 + 'rem'}"> 
                    <li class="list fl activityLi" v-for="(item,index) in newPersonDisplay" :key="index" ref="liBox1" @click="detailLink(1,item,'')">
                        <span class="img-box position-r">
                            <img :src="$imgPath(item.headImg)" alt="">
                            <!-- <em class="zaixian">{{item.onlineStatus == 0 ? '在线' : '下线'}}</em> -->
                        </span>
                        <span class="list-name list-title">{{item.userName}}</span>
                        <span class="list-name2">
                            <em class="list-duanwei">{{item.secondName}}</em>
                            <em class="list-money fr">
                                <label class="fr">{{item.age}}</label>
                                <i class="sex fr">
                                    <img v-if="item.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                                    <img v-if="item.sex == 1" src="../../assets/image/index/img_male.png" alt="">
                                    <img v-if="item.sex == 0" src="../../assets/image/icon_unknown.png" alt="">
                                </i>
                            </em>
                        </span>
                        <!-- <span class="list-name" v-if="iosTrue == false">
                            <em class="list-money fl">
                                <i class="font-34">{{item.price}}钻</i>
                                /{{item.priceUnit}}
                            </em>
                            <em class="list-money fl">
                                <label class="fr">{{item.age}}</label>
                                <i class="sex fr">
                                    <img v-if="item.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                                    <img v-if="item.sex == 1" src="../../assets/image/index/img_male.png" alt="">
                                    <img v-if="item.sex == 0" src="../../assets/image/icon_unknown.png" alt="">
                                </i>
                            </em>
                        </span> -->
                    </li>
                </ul>
            </div>
        </div>
        <div class="index-content-list" v-for="(item,index) in listByServiceUser1" :key="index">
            <span class="tuijian fl">
                {{item.serviceName}}
                <em class="list-sx fr"><img src="../../assets/image/index/icon_more.png" alt="" @click="moreList(item)"></em>
            </span>
            <div class="clearfix index-content-list2">
                <ul class="list-box clearfix" id="activityUl" :style="{width:item.listWidth + 'rem'}"> 
                    <li class="list fl activityLi" v-for="(itemU,indexU) in item.userList" :key="indexU" ref="liBox1" @click="detailLink(2,itemU,item)">
                        <span class="img-box position-r">
                            <img :src="$imgPath(itemU.headImg)" alt="">
                            <!-- <em class="zaixian">{{itemU.onlineStatus == 0 ? '在线' : '下线'}}</em> -->
                        </span>
                        <span class="list-name list-title">{{itemU.nickname}}</span>
                        <span class="list-name2">
                            <em class="list-duanwei">{{itemU.division}}</em>
                            <em class="list-money fr">
                                <label class="fr">{{itemU.age}}</label>
                                <i class="sex fr">
                                    <img v-if="itemU.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                                    <img v-if="itemU.sex == 1" src="../../assets/image/index/img_male.png" alt="">
                                    <img v-if="itemU.sex == 0" src="../../assets/image/icon_unknown.png" alt="">
                                </i>
                            </em>
                        </span>
                        <!-- <i class="fl money">￥</i> -->
                        <!-- <span class="list-name" v-if="iosTrue == false">
                            <em class="list-money fl">
                                
                                <i class="font-34">{{itemU.price}}钻</i>
                                /{{itemU.priceUnit}}
                            </em>
                            <em class="list-money fl">
                                <label class="fr">{{itemU.age}}</label>
                                <i class="sex fr">
                                    <img v-if="itemU.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                                    <img v-if="itemU.sex == 1" src="../../assets/image/index/img_male.png" alt="">
                                    <img v-if="itemU.sex == 0" src="../../assets/image/icon_unknown.png" alt="">
                                </i>
                            </em>
                        </span> -->
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import {mapState} from 'vuex'
import { Swipe, SwipeItem } from 'vant'
import Swiper from 'swiper'
export default {
    data(){
        return{
            images: [],
            gameLists:[],   //首页服务列表
            animate:false,
            listWidth:'',
            listWidth1:'',
            listWidth2:'',
            listWidth3:'',
            page:1,
            size:5,
            sex:this.$route.query.sex,
            recommendedDisplayList:[],
            newPersonDisplay:[],
            listByServiceUser1:[],
            phImgs:[],
            iosTrue:this.$store.state.iosTrue,   //this.$store.state.iosTrue
        }
    },
    created(){
        this.bannerList()
        this.gameListBys()
        this.recommendedDisplays()
        this.newPersonDisplays()
        this.listByServiceUsers()
        this.phTop()
    },
    methods:{
        // banner列表
        bannerList(){
            apiHttp.apiIndex.indexBannerList('',resp=>{
                if(resp.code == 200){
                    this.images = resp.data
                }
            })
        },
        // 游戏展示
        gameListBys(){
            let self = this
            apiHttp.apiIndex.gameListBy('',resp=>{               
                if(resp.code == 200){
                    for(let i = 0; i < resp.data.length; i++){
                        if(i < 5){
                            self.gameLists.push(resp.data[i])
                        }
                    }                    
                }
            })
        },
        // 全部游戏
        allGame(){
            this.$router.push({
                path:'/screening'
            })
        },
        // 跳转到列表页
        gameList(item){
            this.$router.push({
                name: 'list',
                params:{
                    gameName:item.name,
                    gameId:item.id
                }
            })
        },
        // 跳转到详情
        detailLink(type,item1,item){
            let userId = '',serviceId = ''
            if(type == 1){
                userId = item1.userId
                serviceId = item1.serverId
            }else{
                userId = item1.id
                serviceId = item.serviceId
            }
            this.$router.push({
                name: 'detail',
                params:{
                    serviceId:serviceId,
                    userId:userId
                }
            })
        },
        // 为你推荐
        recommendedDisplays(){
            let self = this
            let params = {
                size:this.size,
                sex:this.sex
            }
            apiHttp.apiIndex.recommendedDisplay(params,resp => {
                if(resp.code == 200){
                    for(var i=0;i<resp.data.length;i++){
                        if(resp.data[i].headImg==null || resp.data[i].headImg==''){
                            resp.data[i].headImg = '/user/head/defaultHeadImage.png';
                        }
                    }
                    this.recommendedDisplayList = resp.data
                    this.listWidth = 6.2 * this.recommendedDisplayList.length + this.recommendedDisplayList.length * 0.4
                }
            })
        },
        recommendedDisplayMore(){
            this.recommendedDisplays()
        },
        // 新人推荐
        newPersonDisplays(){
            let params = {
                size:this.size,
                sex:this.sex
            }
            apiHttp.apiIndex.newPersonDisplay(params,resp => {
                if(resp.code == 200){
                    for(var i=0;i<resp.data.length;i++){
                        if(resp.data[i].headImg==null || resp.data[i].headImg==''){
                            resp.data[i].headImg = '/user/head/defaultHeadImage.png';
                        }
                    }
                    this.newPersonDisplay = resp.data
                    this.listWidth1 = 6.2 * this.newPersonDisplay.length + this.newPersonDisplay.length * 0.4
                }
            })
        },
        newPersonDisplayMore(){
            this.newPersonDisplays()
        },
        // 游戏人物展示
        listByServiceUsers(){
            let params = {
                page:this.page - 1,
                size:this.size,
            }
            apiHttp.apiIndex.listByService(params,resp=>{
                if(resp.code == 200){
                    for(let i = 0; i < resp.data.length; i++){
                        if(resp.data[i].headImg==null || resp.data[i].headImg==''){
                            resp.data[i].headImg = '/user/head/defaultHeadImage.png';
                        }
                        resp.data[i].listWidth = 6.2 * resp.data[i].userList.length + resp.data[i].userList.length *0.4
                        this.listByServiceUser1.push(resp.data[i])
                    }
                }
            })
        },
        moreList(item){
            this.$router.push({
                name:'list',
                params:{
                    gameName:item.serviceName,
                    gameId:item.serviceId
                }
            })
        },
        // 人气排行榜
        phTop(){
            apiHttp.apiIndex.getUserCreditPopularityRankingTop('',resp=>{
                if(resp.code == 200){
                    for(var i=0;i<resp.data.length;i++){
                        if(resp.data[i].headImg==null || resp.data[i].headImg==''){
                            resp.data[i].headImg = '/user/head/defaultHeadImage.png';
                        }
                        this.phImgs.push( resp.data[i]);
                    }                   
               }
            })
        },
        bannerLink(item){
            if(item.url != '#'){
                this.$router.push({
                    name:item.url
                })
            }
        }
    }
}
</script>
<style scoped>
.phimg-box{
    height: 1.5rem;
    display: inline-block;
    position: relative;
    bottom: 0.2rem;
}
.phimg-box img{
    width: 1.3rem !important;
    height: 1.3rem !important;
    border-radius: 50%;
    border: 0.1rem solid white;    
}
.phimg-box img:nth-child(2){
    position: relative;
    left: 0.5rem;
}
.phimg-box img:nth-child(1){
    position: relative;
    left: 1rem;
    z-index: 99;
}

.index-content{
    padding: .6rem 0;
}
.padding-left-right-3{
    padding: 0 .6rem;
}
.border-radius-img{
    border-radius: .4rem;
}
.nav-tab{
    padding: .4rem;
}
.nav-tab img{
    width: 2.2rem;
}
.list-box{
    overflow-y: auto;
}
.nav-tab-title{
    width: 2.2rem;
    display: inline-block;
    font-size: .44rem;
}
.index-content-list{
    background-color: #f6f6f6;
    padding: .3rem .6rem;
    
}
.index-content-list2{
    overflow-y: auto;
    width: 100%;
}
.index-content-list2::-webkit-scrollbar {/*滚动条整体样式*/
    width: 0;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
}
.list-sx{
    width: .6rem;
    height: .6rem;
    display: block;
}
.tuijian{
    font-size: .5rem;
    height: 1rem;
    line-height: 1rem;
    display: block;
    width: 100%;
    font-weight: 600;
}
.list{
    background-color: #fff;
    width: 5.4rem;
    height: auto;
    padding: .4rem;
    border-radius: .2rem;
    margin-right: .4rem;
}
.img-box{
    width: 5.4rem;
    height: 3.6rem;
    display: block;
    overflow: hidden;
}
/* .zaixian{
    position: absolute;
    right: 0;
    top: 0;
    font-size: .4rem;
    background-color: #D84F4D;
    color: #fff;
    font-style: normal;
    padding: .04rem .2rem;
    z-index: 10;
} */
.list-name{
    height: 1rem;
    line-height: 1rem;
    display: block;
    color: #000;
    font-size: .48rem;
    overflow: hidden;
}
.list-title{
    height: 1.4rem;
    line-height: 1.6rem;
}
.list-name2{
    height: 1rem;
    line-height: 1rem;
    display: block;    
    overflow: hidden;
}
.list-name2 .list-duanwei{
    height: .6rem;
    line-height: .66rem;
    display: inline-block;
    color: #999999;
    border: solid .04rem #999999;
    padding: 0 .3rem;
    border-radius: .6rem;
    font-size: 0.36rem;
}
.list-money{
    width: 50%;
    font-size: .52rem;
    color: #D84F4D;
}
.list-money .money{
    font-size: .4rem;
    padding-top: 0.07rem;
}
.list-money .sex{
    width: .52rem;
    margin-right: .2rem;
}
.list-money .sex img{
    margin-top: .2rem;
}
.list-money label{
    color: #999999;
}
.ph-box{
    height: 2rem;
    width: 100%;
}
.icon_img_bj{
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
}
.box-ph{
    position: absolute;
    left: 0;
    top: .5rem;
    height: 1rem;
    width: 100%;
}
.jiangbei{
    width: 1rem !important;
    margin-left: 1rem;
}
.ph-zi{
    height: 1rem;
    line-height: 1rem;
    padding-left: .2rem;
    display: inline-block;
}
.ph-jt{
    width: 0.4rem;
    height: 0.6rem;    
    margin-top: 0.2rem;
    margin-right: 0.8rem;
    margin-left: 0.5rem;
}
.ph-jt>img{
    width: 0.4rem !important;
    height: 0.6rem !important;
}
</style>


